CSS Sprites
I nie chodzi tutaj o popularny napój do picia, tylko o optymalizację strony. Tak, tak :). Jest to specjalna technika, dzięki której możemy sprawić, aby nasza strona szybciej się ładowała. W przypadku serwisów o większym ruchu, każdy bajt zużytego transferu będzie na wagę złota.
Czym jest CSS Sprites?
Z języka angielskiego Sprite oznacza: skrzat, krasnoludek. CSS Sprites to technika wykorzystywana przez frontendowców, którą często się stosuje aby zoptymalizować daną stronę. Główną ideą jest przyspieszenie ładowania się strony oraz zmniejszenie zapytań HTTP. Każde pobranie pliku (elementu) na stronie np. obrazek, plik JS czy CSS to oddzielne zapytanie. Jeżeli mamy tego dużo, to serwis wgrywa się trochę.
Wszystko powinno stać się jasne, gdy przyjrzymy się badaniom frontendowców z Yahoo!, którzy zbadali czas ładowania się stron największych portali. Z badania dowiadujemy się jednej, bardzo ważnej rzeczy. Ładowanie się samego kodu HTML, to tylko 10-20% całego czasu ładowania się strony. Reszta to obrazki, style, javascript i inne. Zobaczcie obrazek poniżej:
Każdy z Was może sobie przeprowadzić takie badanie. Wystarczy dodatek do FireFoxa: FireBug, dzięki któremu możemy analizować to, co dzieje się na stronie. Szczególnie monitorować połączenia sieciowe â HTTP. Nawet na Onecie 90% to obrazki :).
Rozwiązanie
Cała sztuczka polega na tym, aby większość obrazków upchnąć do jednego obrazka i wykorzystywać je w postaci teł, do których dobieramy się poprzez artybut css â background-position
. Jeżeli dalej nie wiadomo o co chodzi to rzućcie okiem na te obrazki: master onetu i master youtube. Jak widać, loga, tła oraz ikonki zostały osadzone w jednym pliku. Dzięki temu, zamiast pobierać X obrazków pobieramy TYLKO jeden.
Tą sztuczkę, również stosuje się do różnych hoverów, czyli akcji na najechanie myszki na dany element HTML.
W praktyce wygląda to tak:
#element { background: url(/images/master-bg.png) 0 0 no-repeat; } #logo { background: url(/images/master-bg.png) 0 -100px no-repeat; } #bg { background: url(/images/master-bg.png) 0 -200px no-repeat; } #link_home:hover { background: url(/images/master-bg.png) 0 -300px no-repeat; }
Na odpowiednich wysokościach (100, 200, 300) znajdują się grafiki.
Jeżeli chcecie dowiedzieć się więcej o tym, to polecam lekturę na A List Apart, CSS Tricks i Smashing Magazine.
Komentarze 29
Zacna technika, ale najpierw należałoby wybatożyć „webmajstrów” u których ikonka 50Ă50 pikseli waży 150 KB. Poważnie, dziś widziałem, takie cuda tworzy gościu oferujący się jako profesjonalista.
Kurde, miałem o tym pisać właśnie ;P
Tym bardziej, że napisałbym praktycznie to samo - opierając się o kupioną niedawno książkę, 'optymalizacja stron www' jednego z programistów Yahoo ;]
Dobra technika, stosowałem to zawsze w hoverach ale widać, że nadaje się także do innych grafik. Ciekawe tylko czy nie wpływa to na wydajną pracę przeglądarki jeśli takich elementów jest bardzo dużo (?)
Jak każde rozwiązanie - także to ma swoje plusy i minusy. Plusy zostały opisane, minusami są: - brak możliwości zastosowania tła powtarzalnego, zapisanego w grafice w tej technologii - brak możliwości optymalizacji jakościowej grafiki każdego elementu (np. dla zdjęcia chcę mieć jpeg 60%, a dla ikonki - gifa, natomiast do przezroczystego elementu - png).
Myślę jednak, że można znaleźć złoty środek - stosować technikę sprite'ów, ale używając kilku grafik, np. grafikę jpg dla dużych elementów, gif dla ikonek itp.
Polecam http://csssprites.com/ do generowania sprites na szybko :)
Całkiem ciekawe rozwiązanie na optymalizacje kodu tylko czy jest sens ;)? Przy obecnych łączach raczej przeciętny internauta nie odczuje zbytnio różnicy podczas przeglądania strony.
No chyba że się mylę to mnie poprawcie ;)
No ale trzeba będzie poczytać. Jak widziałem Google również korzysta z tego typu rozwiązań.
@Paweł Rabinek - nie wpływa. Obrazek jest wczytywany raz do pamięci podręcznej przeglądarki.
@uranik - jeśli chodzi o tła, to można bez problemu powtarzać po X. Nie popadajmy w jakieś skrajne przypadki :). W sprite'ach umieszcza się raczej stałe obrazki i kategoryzuje się je (w miarę możliwości). Jeden sprite z ikonkami, drugi z hoverami itp.
@Marek - zapomniałem o generatorach sprite'ów - dzięki za linka.
@Michał - nie chodzi tutaj o łącze, tylko o moce przerobowe serwera. Po co go zarzynać? :) Zrozumiesz jak będziesz miał do czynienia z potężnym ruchem :)
problemem jest raczej to, że przy pobieraniu każdego elementu strony na nowo musi być nawiązywane połączenie z serwerem http (oczywiście jeśli nie jest użyty keep alive, który nie zawsze może być zastosowany). stąd stosuje się właśnie tego typu techniki jak css sprites, scalanie plików css w jeden czy łączenie plików js.
a odnośnie powtarzalności tła, to można również powtarzać po Y, trzeba jednak wtedy inaczej rozlokować elementy. no i nigdy nie mozna po X i Y z jednego pliku
@tyswidzial - nie chodzi tylko o połączenia. Równie ważne są same requesty. Nawet keep alive nie załatwia sprawy, bo nadal trzeba wysłać pakiet z requestem i serwer musi zareagować (oczywiście jest to lepsze niż całe połączenie). Ponadto jest limit na liczbę jednocześnie wykonywanych requestów.
Tą samą sztuczkę stosuje samo wielkie Google: http://www.google.pl/images/nav_logo7.png
Gorzej jak komuś ta technika przypadnie do gustu na tyle, aby ładować w jednym obrazku dosłownie wszystko, nawet wykresy czy obrazki, które powinny zostać wstawione za pomocą tradycyjnego img src z altami :/
Sztuczka bardzo dobra, ale niestety pracochłonna - dlatego wykonuję ją tylko na wyraźne życzenie klienta, który wie wtedy za co płaci. Największa zaleta to szybkość ładowania grafik i znacznie mniejsze obciążenie serwera. A w przypadku takich serwisów jak google czy yahoo każdy bajt ma ogromne znaczenie. Kolejna fajna sprawa - wszystkie grafiki w obrębie jednego sprite'a pojawiają się jednocześnie - nie ma efektu że grafika pojawia się stopniowo, że kawałeczek tutaj, potem kawałeczek tam.
Dlaczego pracochłonna? Jest już kilka generatorów.
Przygotowanie tego i ustawienie w css'ie zajęło kilkanaście minut.
http://cache.katalok.pl/img/sprite2.png
http://cache.katalok.pl/img/sprite.png
Zaoszczędziłem kilkadziesiąt odwołań do serwera, transfer itp. Strona ładuje się szybciej, ludzie chętniej przeglądają. Każdy wygrywa. Gra warta świeczki.
Trzeba przyznać ,że zabawa z wtyczkami YSlow i Googlowskim PageSpeed jest bardzo wciągająca.
Do hoverów wiadomo sprawa niezbędna, bo może się okazać, że nagle link znika na sekundę lub dwie. Moim zdaniem największym problemem tej techniki, jest moment cięcia projektu i pisania styli. Trudno się połapać, który background ma jakie współrzędne. Chyba najlepszym rozwiązaniem, szczególnie w zawiłych projektach jest zrobienie sprites na koniec, po zakodowaniu layouta. Używając tej techniki trzeba bezwzględnie pamiętać o nadawaniu koloru tła (oczywiście tam gdzie występuje), żeby elementy były widoczne zanim wczyta się obrazek.
Aplikacji pomocnych jest masa, ostatnio testuję http://spriteme.org/ jako skryptozakładkę.
Widziałem podobny artykuł, z tym, że z opisem na konkretnym przykładzie. Polecam, pokazuje w praktyce jak to się stosuje, mnie bardzo pomogło:
CSS Sprites - łączenie wielu obrazków w jeden redukcją żądań HTTP | Vokiel.com
@up, link się nie dodał:
http://blog.vokiel.com/css-sprites-laczenie-wielu-obrazkow-w-jeden-redukcja-zadan-http
no tak wszystko ok, nakład pracy trochę większy przy css przy większych serwisach i dużym ruchu pomocna opcja. Tylko czy tworzenie w html zwykłych linków tekstowych, i wyrzucanie ich w css np. text-indentem w kosmos na -9999 jest dobre optymalizacyjnie i eleganckie inżynieryjnie:)
no tak wszystko ok, nakład pracy trochę większy przy css przy większych serwisach i dużym ruchu pomocna opcja. Tylko czy tworzenie w html zwykłych linków tekstowych, i wyrzucanie ich w css np. text-indentem w kosmos na -9999 jest dobre optymalizacyjnie i eleganckie inżynieryjnie:)
Wydaje mi się, że jeszcze większe znaczenie niż wielkość obrazka ma liczba zapytań HTTP. Mieliśmy ostatnio z kumplem sytuację w 1 sklepie na magento, gdzie serwer dedyk się kompletnie zamulił - w ogóle nie odpowiadał przez kilka godzin, bo przez kilka godzin uzbierał kilkanaście tys wejść, ale z analizy kumpla (bo ja to jestem zielony z administracji) wyszło, że jedynym powodem była liczba zapytań HTTP (tam był projekt przejęty po innej firmie i dużo doróbek). W sumie z jednego wejścia na stronę główną (gdzie nic nie ma) mamy 39 żądań, a pewnie mogło by być
Dziekuje bardzo za ciekawy artykul. Strona mojej zony ma ogromne problemy z wczytywaniem i na wolniejszych laczach potrafi to zajac dobrych kilkanascie sekund. Wg Google PageSpeed to wlasnie obrazki powoduje u niej najwieksze spowolnienie.
Sprobuje zrobic podobnie jak Google czy Youtube z przyciskami i tlami i sprawdze czy jest duza roznica.
A jesli serwis jest postawiony na Joomli, to czy bedzie widac duza roznice predkosci?
Ta strona wykorzystuje sprite'a i szybko się otwiera.
http://www.pelnegry24.pl zobaczcie i przetestujcie
Nigdy nie chciało mi się bawić w te klocki... ale generator to już wygodna sprawa. W końcu i tak jadę z wszystkim z paluszka, więc co mi tam. Zobaczę jakie będą efekty - tym razem dziękuję za inspiracje.
Poruszyłeś bardzo ważną kwestie. Ponoć szybkość ładowania strony jest jednym z czynników wpływających na ustalanie SERP'ów - co prawda jeden z 200, ale zawsze to jeden krok do przodu. Muszę powiedzieć, że ostatnio bawiłem się trochę FireBug'iem i po dostosowaniu się do jego wskazówek strona rzeczywiście szybciej się ładuje - co dobre dla użytkownika strony jest dobre i dla Google ;-)
A ja jestem amatorem i jeżeli jest możliwość wytłumaczenia tego nieco inaczej.... rozumiem, że to zmniejsza transfer itp ale mając taki obraz jak ta grafika wczytuje się odpowiednio na stronę, że nie powstają jakieś krzaki albo coś innego? ^^
Świetny i przydatny artykuł. w forach SMF jest to wykorzystywane właśnie zawsze.
sprite generator: http://pl.spritegen.website-performance.org/
No to teraz trzeba połączyć wszystkie maluchy i kombinować z CSS :)
Popraktykowac nie zaszkodzi, ważne żeby umiec wykorzystac w praktyce. Przydałby się wpis o podobnych trikach w CSS w którym podane zostaną sztuczki i ciekawe rozwiązania. Dopiero raczkuję w CSS, dlatego głodny jestem i ciekawy rozwiązań nawet tych niestandardowych.
Piotrze, jak sprawa wygląda po 10 latach? Zdaje się, że duże serwisy już nie stosują css sprites.